<template>
	<el-main class="bg">
		<el-row :gutter="20">
			<el-col :sm="8" :md="8" :lg="8" :offset="8">
				<el-card shadow="hover" style="margin-top: 50%;">
					<div class="title">
						{{ projectName }}
					</div>
					<el-form ref="form" :model="form" :rules="rules" @submit.native.prevent>
						<el-form-item label="密码" prop="lockPassword">
							<el-input 
								type="password" 
								placeholder="请输入锁屏密码解锁" 
								v-model="form.lockPassword">
								<el-button 
									slot="append" 
									icon="el-icon-unlock"
									style="color: #67C23A;"
									@click="unLock('form')">
								</el-button>
								<el-button 
									slot="append" 
									icon="el-icon-switch-button"
									style="color: #F56C6C;"
									@click="logOut()">
								</el-button>
							</el-input>
						</el-form-item>
					</el-form>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	import { getLock,removeLock,removeAll } from '../utils/permission'
	import { decrypt } from '../utils/secret'
	export default {
		name: "Lock",
		data () {
			return {
				form: {},
				rules: {
					lockPassword: [
						{ required: true, message: '请输入锁屏密码', trigger: ['blur', 'change'] }
					]
				}
			}
		},
		methods: {
			// 解锁
			unLock(form) {
				this.$refs[form].validate((valid) => {
					let _this = this;
					if (valid) {
						let lockPassword = this.form.lockPassword;
						if (lockPassword === decrypt(getLock())) {
							removeLock();
							this.$router.push('/');
						} else {
							_this.$message.error("锁屏密码不正确");
						}
					}
				});
			},
			// 登出
			logOut() {
				removeAll();
				this.$router.push('/login');
			}
		}
	}
</script>

<style scoped>
	.bg {
		background-image: url(../assets/images/background.svg);
		background-size: cover;
		min-height: 100vh;
	}
	.title {
		background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
		-webkit-background-clip: text;
		color: transparent !important;
		font-size: 36px;
		font-weight: bold;
		text-align: center;
		margin: 10% auto;
	}
	@media only screen and (max-width: 1199px) {
		.el-col-offset-8 {
			margin-left: 0 !important;
		}
	}
</style>
